<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/chqimage/favicon.ico}" type="image/x-icon">
    <title>用户中心</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet"  th:href="@{/chqcss/my-mediate.css}">
    <script type="text/javascript"  th:src="@{/chqjs/jquery.min.js}"></script>
    <script type="text/javascript"  th:src="@{/chqjs/vue.min.js}"></script>
</head>
<body>
<!--顶部标题-->
<div id="head">
    <a href="personal.html" class="return_img float_left"><img src="/chqimage/icon-fanh.png" alt=""></a>
    <p class="head_title">我的调解</p>
</div>
<div id="my_mediate">
    <!--调解状态-->
    <ul id="mediate_state_list">
        <li class="mediate_state"   @click="changeState(0)" :class="{'state_active':state_num == '0'}">
            <span>待受理</span>
            <img src="/chqimage/hengx.png" alt="" class="hengx_img"   v-if="state_num == '0'" >
        </li>
        <li class="mediate_state" @click="changeState(1)" :class="{'state_active':state_num == '1'}">
            <span>正在调解</span>
            <img src="/chqimage/hengx.png" alt="" class="hengx_img"  v-if="state_num == '1'">
        </li>
        <li class="mediate_state"  @click="changeState(2)"  :class="{'state_active':state_num == '2'}">
            <span>历史调解</span>
            <img src="/chqimage/hengx.png" alt="" class="hengx_img"   v-if="state_num == '2'">
        </li>
    </ul>
    <!--事件-->
    <!--待受理-->
    <ul class="case_list" v-if="state_num == '0'">
        <li class="case"  v-for="caseReady in caseReadyList" @click.self="caseInfo(caseReady.case_id)">
            <div class="case_title">
                <span class="float_left title">{{caseReady.type_name}}</span><span class="float_right time">{{caseReady.create_date}}</span>
            </div>
            <div class="case_content">{{caseReady.details}}</div>
            <div class="case_other">
                <div class="fayuan float_left">{{caseReady.court}}</div>
                <div class="zhuangtai float_left">{{caseReady.case_state}}</div>
            </div>
        </li>
    </ul>
    <!--正在调解-->
    <ul class="case_list" v-if="state_num == '1'">
        <li class="case"   v-for="caseBeing in caseBeingList" @click.self="caseInfo(caseBeing.case_id)">
            <div class="case_title">
                <span class="float_left title">{{caseBeing.type_name}}</span><span class="float_right time">{{caseBeing.create_date}}</span>
            </div>
            <div class="case_content">{{caseBeing.details}}</div>
            <div class="case_other">
                <div class="fayuan float_left">{{caseBeing.court}}</div>
                <div class="zhuangtai float_left">{{caseBeing.case_state}}</div>
            </div>
        </li>
    </ul>
    <!--历史调解-->
    <ul class="case_list" v-if="state_num == '2'">
        <li class="case"   v-for="caseFinish in caseFinishList" @click.self="caseInfo(caseFinish.case_id)">
            <div class="case_title">
                <span class="float_left title">{{caseFinish.type_name}}</span><span class="float_right time">{{caseFinish.create_date}}</span>
            </div>
            <div class="case_content">{{caseFinish.details}}</div>
            <div class="case_other">
                <div class="fayuan float_left">{{caseFinish.court}}</div>
                <div class="zhuangtai float_left">{{caseFinish.case_state}}</div>
                <div class="pingjia float_right" @click="showPingjia(caseFinish.case_id)">{{caseFinish.judged_state}}</div>
            </div>
        </li>
    </ul>

</div>

<script>
    new Vue({
        el:'#my_mediate',
        data:{
            caseReadyList:[],
            caseBeingList:[],
            caseFinishList:[],
            state_num:''
        },
        mounted:function () {
            //获取URL参数，即当前案件调解状态
            var location = window.location.href;
            var href= location+"";
            var href_part=href.split('?');
            this.state_num=(href_part[1])*1;
            var _that = this;
            $.ajax({
                 url:'/user/allCases',
                 type:'get',
                 datatype:'json',
                 success:function (result) {
                     result.forEach(function (obj,i) {
                     if(obj.judged_state == 0){
                        obj.judged_state = '未评价';
                     }
                     if(obj.judged_state == 1){
                        obj.judged_state = '查看评价';
                     }
                     if (obj.case_state != 0) {
                         if (obj.case_state == 1) {
                             obj.case_state = '正在调解';
                             _that.caseBeingList.push(obj);
                         } else if (obj.case_state == 2) {
                             obj.case_state = '调解成功';
                             _that.caseFinishList.push(obj);
                         } else {
                             obj.case_state = '调解失败';
                             _that.caseFinishList.push(obj);
                         }
                     } else {
                        obj.case_state = '待受理';
                         _that.caseReadyList.push(obj);
                     }
                     });
                 },
                 error:function (err) {
                    console.log(err);
                 }
             });
        },
        methods:{
            changeState:function (case_num) {
                 this.state_num = case_num;
            },
            caseInfo:function (case_id) {
                console.log(case_id);

            },
            showPingjia:function (case_id) {
                $.ajax({
                    url:'oneCase?case_id='+case_id,
                    type:'get',
                    success:function (result) {
                        window.location.href = '/user/pingjia';
                    },
                    error:function (err) {
                        console.log(err);
                    }
                })
            }
        }
    })

</script>

</body>
</html>